{% extends "base.html" %}

{% block content %}
<div class="container">
    <h2>数据对比</h2>
    <div class="row mt-4">
        <!-- 组织数据对比 -->
        <div class="col-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">组织画像数据对比</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>字段名称</th>
                                    <th>页面值</th>
                                    <th>数据库值</th>
                                    <th>差异状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="orgCompareResult">
                                <!-- 组织数据对比结果将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 员工数据对比 -->
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">人才画像数据对比</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>员工姓名</th>
                                    <th>字段名称</th>
                                    <th>页面值</th>
                                    <th>数据库值</th>
                                    <th>差异状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="empCompareResult">
                                <!-- 员工数据对比结果将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 差异详情模态框 -->
<div class="modal fade" id="diffDetailModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">差异详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6>数据位置</h6>
                    <p id="diffLocation" class="mb-2"></p>
                </div>
                <div class="mb-3">
                    <h6>数据库信息</h6>
                    <p id="diffDatabase" class="mb-2"></p>
                </div>
                <div class="mb-3">
                    <h6>字段信息</h6>
                    <p id="diffField" class="mb-2"></p>
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header bg-primary text-white">
                                页面值
                            </div>
                            <div class="card-body">
                                <p id="diffPageValue" class="mb-0"></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header bg-success text-white">
                                数据库值
                            </div>
                            <div class="card-body">
                                <p id="diffDbValue" class="mb-0"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadComparisonData();
});

function loadComparisonData() {
    // 加载组织数据对比
    fetch('/talent/api/compare/organization')
        .then(response => response.json())
        .then(data => {
            const tbody = document.getElementById('orgCompareResult');
            tbody.innerHTML = data.differences.map(diff => `
                <tr>
                    <td>${diff.field}</td>
                    <td>${diff.page_value}</td>
                    <td>${diff.db_value}</td>
                    <td><span class="badge bg-warning">不一致</span></td>
                    <td>
                        <button class="btn btn-sm btn-info" onclick='showDiffDetail(${JSON.stringify(diff)})'>
                            查看详情
                        </button>
                    </td>
                </tr>
            `).join('');
        });

    // 加载员工数据对比
    fetch('/talent/api/compare/employees')
        .then(response => response.json())
        .then(data => {
            const tbody = document.getElementById('empCompareResult');
            tbody.innerHTML = data.differences.map(diff => `
                <tr>
                    <td>${diff.employee}</td>
                    <td>${diff.field}</td>
                    <td>${diff.page_value}</td>
                    <td>${diff.db_value}</td>
                    <td><span class="badge bg-warning">不一致</span></td>
                    <td>
                        <button class="btn btn-sm btn-info" onclick='showDiffDetail(${JSON.stringify(diff)})'>
                            查看详情
                        </button>
                    </td>
                </tr>
            `).join('');
        });
}

function showDiffDetail(diff) {
    document.getElementById('diffLocation').textContent = diff.location || '未知位置';
    document.getElementById('diffDatabase').textContent = diff.database || '未知数据库';
    document.getElementById('diffField').textContent = `${diff.field} (${diff.field_name})`;
    document.getElementById('diffPageValue').textContent = diff.page_value;
    document.getElementById('diffDbValue').textContent = diff.db_value;
    
    new bootstrap.Modal(document.getElementById('diffDetailModal')).show();
}
</script>

<style>
.table th {
    background-color: #f8f9fa;
}
.badge {
    font-size: 0.875rem;
}
.btn-info {
    color: #fff;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}
.btn-info:hover {
    color: #fff;
    background-color: #31d2f2;
    border-color: #25cff2;
}
</style>
{% endblock %}
